<template>
  <div class="keshi">
    <div class="box">
      <div class="top">
        <h3>条件查询</h3>
        <div class="topbox">
          <form>
            一级科室：
            <select>
              <option>全部</option>
              <option>内科</option>
              <option>外科</option>
              <option>眼科</option>
              <option>口腔科</option>
              <option>神经科</option>
            </select>
          </form>
          <div class="er">
            二级科室：
            <input type="text" />
          </div>

          <div class="button">
            <button>重置</button>
            <button>查询</button>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="bottom_top">科室列表</div>
        <div class="bottom_bottom">
          <el-table :data="tableData" style="width: 100%,overflow: hidden;">
            <el-table-column prop="one" label="一级科室" width="180" />
            <el-table-column prop="two" label="二级科室" />
            <el-table-column fixed="right" label="操作" width="120">
              <template #default>
                <el-button link type="primary" size="small" @click="fun"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- <div class="box_box" @click="fun" v-show="flag">
      <div class="center" @click.stop="1">
        <p>内科</p>
        <div class="center_center">
          <input type="text" v-model="neike" />
          <button @click="tianjia">+添加</button>
        </div>
        <div class="box">
          <span v-for="(item, index) in neikelist" :key="index"
            >{{ item }}x</span
          >
        </div>
      </div>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
import { ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
//pinia数据
import {keshilist} from '../../stores/counter'

//渲染的数据
var tableData = ref([ ]);



//删除
var fun = () => {
  var i = tableData.value.findIndex((item)=>{
    return item
  })
  if(i != -1){
    tableData.value.splice(i,1)
  }
};

//添加
var neike = ref("");
var neikelist = ref([]);
var tianjia = () => {
  var newneike = JSON.parse(JSON.stringify(neike.value));
  neikelist.value.push(JSON.parse(newneike));
};


var store = keshilist()
onMounted(() => {
  tableData.value = store.tableData
  // console.log(store.tableData);
  
})
</script>

<style lang="scss" scoped>
.keshi {
  width: 100%;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.371);
  display: flex;
  .box {
    width: 1200px;
    margin: 0 auto;
    .top {
      width: 1200px;
      height: 100px;
      background-color: white;
      margin: 20px 0;
      padding-left: 20px;
      box-sizing: border-box;
      h3 {
        height: 40px;
        font-size: 16px;
        // background-color: blue;
        line-height: 40px;
      }
      .topbox {
        width: 100%;
        height: 60px;
        // background-color: orange;
        line-height: 60px;
        display: flex;
        font-size: 12px;
        form {
          margin-right: 40px;
          select {
            width: 75px;
            height: 30px;
            text-align: center;
            border: 1px solid gray;
            border-radius: 5px;
          }
        }
        .er {
          input {
            width: 130px;
            height: 25px;
            border-radius: 5px;
            border: 1px solid rgba(128, 128, 128, 0.605);
            outline-color: rgba(0, 0, 255, 0.478);
          }
        }
        .button {
          button {
            width: 60px;
            height: 30px;
            margin: 0 5px;
            border-radius: 5px;
            border: none;

            &:hover {
              color: white;
              background-color: blue;
              cursor: pointer;
            }
          }
        }
      }
    }
    .bottom {
      width: 1200px;
      height: 450px;
      background-color: white;
      padding: 0 20px;
      box-sizing: border-box;
      overflow: auto;
      .bottom_top {
        width: 100%;
        height: 50px;
        font-size: 16px;
        font-weight: 700;
        line-height: 50px;
        position: sticky;
        background-color: white;
        top: 0;
        z-index: 999;
      }
      .bottom_bottom {
        overflow: hidden;
      }
    }
  }
  .box_box {
    width: 100%;
    height: 100%;
    background-color: rgba(128, 128, 128, 0.347);
    z-index: 999;
    position: fixed;
    top: 0;
    .center {
      width: 400px;
      height: 200px;
      background-color: white;
      margin: 15% 28%;
      padding: 20px;
      box-sizing: border-box;
      p {
        width: 100%;
        height: 40px;
        font-size: 14px;
        // background-color: red;
        line-height: 40px;
      }
      .center_center {
        display: flex;
        margin: 5px 0;
        input {
          width: 200px;
          height: 30px;
          margin-right: 20px;
          outline: none;
        }
        button {
          width: 60px;
          height: 30px;
          background-color: rgba(0, 0, 255, 0.473);
          color: white;
          border-radius: 5px;
          border: none;
        }
      }
      .box {
        width: 100%;
        height: 70px;
        background-color: red;
        span {
          display: inline-block;
          padding: 10px;
          margin-right: 5px;
          font-size: 10px;
          border-radius: 5px;
          background-color: rgba(128, 128, 128, 0.718);
        }
      }
    }
  }
}
</style>